<template>
  <div class="count">
    <h2>当前的和为:{{ sum }}</h2>
    <h2>当前的学校:{{ school }}</h2>
    <h2>当前的地址:{{ address }}</h2>
    <hr />
    <h2>成绩:{{ hah }}</h2>
    <h2>大写的地址:{{ heh }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="mianu">-</button>
    <button @click="add">+</button>
    <button @click="odd">当前的和为奇数在加+</button>
    <button @click="hold">等一等在+</button>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  // 计算属性
  computed: {
    ...mapState(["sum", "school", "address"]),
    ...mapGetters({ hah: "bigSum", heh: "bigSchool" }),
  },
  methods: {
    mianu() {
      this.$store.commit("JIAN", this.n);
    },
    add() {
      this.$store.commit("JIA", this.n);
    },
    odd() {
      this.$store.dispatch("qishu", this.n);
    },
    hold() {
      this.$store.dispatch("dengyixia", this.n);
    },
  },
};
</script>

<style scoped>
button {
  margin-left: 10px;
  background-color: aqua;
}
.count {
  text-align: center;
}
</style>